<template>
  <view class="password-container">
    <!-- 头部说明 -->
    <view class="header-section">
      <view class="header-icon">
        <uni-icons type="locked-filled" size="40" color="#007aff"></uni-icons>
      </view>
      <text class="header-title">修改密码</text>
      <text class="header-subtitle">为了您的账户安全，请设置一个强密码</text>
    </view>

    <!-- 表单卡片 -->
    <view class="form-card">
      <uni-forms ref="form" :value="user" labelWidth="0">
        <view class="form-item">
          <view class="input-wrapper">
            <view class="input-icon">
              <uni-icons type="locked" size="18" color="#999"></uni-icons>
            </view>
            <uni-easyinput 
              type="password" 
              v-model="user.oldPassword" 
              placeholder="请输入当前密码"
              :clearable="false"
              class="password-input"
            />
          </view>
        </view>

        <view class="form-item">
          <view class="input-wrapper">
            <view class="input-icon">
              <uni-icons type="locked-filled" size="18" color="#999"></uni-icons>
            </view>
            <uni-easyinput 
              type="password" 
              v-model="user.newPassword" 
              placeholder="请输入新密码"
              :clearable="false"
              class="password-input"
            />
          </view>
          <view class="password-tips">
            <text class="tip-text">密码长度6-20位，建议包含字母、数字和符号</text>
          </view>
        </view>

        <view class="form-item">
          <view class="input-wrapper">
            <view class="input-icon">
              <uni-icons type="locked-filled" size="18" color="#999"></uni-icons>
            </view>
            <uni-easyinput 
              type="password" 
              v-model="user.confirmPassword" 
              placeholder="请确认新密码"
              :clearable="false"
              class="password-input"
            />
          </view>
        </view>
      </uni-forms>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <button class="submit-btn" @click="submit" :disabled="!isFormValid">
        <uni-icons type="checkmarkempty" size="18" color="#fff"></uni-icons>
        <text>确认修改</text>
      </button>
    </view>

    <!-- 安全提示 -->
    <view class="security-tips">
      <view class="tips-card">
        <view class="tips-header">
          <uni-icons type="info" size="16" color="#ff9500"></uni-icons>
          <text class="tips-title">安全提示</text>
        </view>
        <view class="tips-content">
          <text class="tip-item">• 请勿使用与其他网站相同的密码</text>
          <text class="tip-item">• 定期更换密码，提高账户安全性</text>
          <text class="tip-item">• 如遇异常登录，请及时联系管理员</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { updateUserPwd } from "@/api/system/user"
import { ref, reactive, computed, getCurrentInstance } from "vue"
import { onReady } from "@dcloudio/uni-app"

const { proxy } = getCurrentInstance()
const user = reactive({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined
})

const rules = ref({
  oldPassword: {
    rules: [{
      required: true,
      errorMessage: '请输入当前密码'
    }]
  },
  newPassword: {
    rules: [{
      required: true,
      errorMessage: '请输入新密码',
    }, {
      minLength: 6,
      maxLength: 20,
      errorMessage: '密码长度在 6 到 20 个字符'
    }]
  },
  confirmPassword: {
    rules: [{
      required: true,
      errorMessage: '请确认新密码'
    }, {
      validateFunction: (rule, value, data) => user.newPassword === value,
      errorMessage: '两次输入的密码不一致'
    }]
  }
})

// 表单验证状态
const isFormValid = computed(() => {
  return user.oldPassword && user.newPassword && user.confirmPassword && 
         user.newPassword.length >= 6 && user.newPassword === user.confirmPassword
})

onReady(() => {
  proxy.$refs.form.setRules(rules.value)
})

function submit() {
  if (!isFormValid.value) {
    proxy.$modal.showToast('请完善密码信息')
    return
  }

  proxy.$refs.form.validate().then(res => {
    proxy.$modal.showLoading('正在修改密码...')
    
    updateUserPwd(user.oldPassword, user.newPassword).then(response => {
      proxy.$modal.hideLoading()
      proxy.$modal.msgSuccess("密码修改成功")
      
      // 清空表单
      user.oldPassword = ''
      user.newPassword = ''
      user.confirmPassword = ''
      
      // 延迟返回
      setTimeout(() => {
        proxy.$tab.navigateBack()
      }, 1500)
    }).catch(() => {
      proxy.$modal.hideLoading()
    })
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';

.password-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.header-section {
  text-align: center;
  margin-bottom: 40px;
  
  .header-icon {
    margin-bottom: 16px;
  }
  
  .header-title {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: $gray-800;
    margin-bottom: 8px;
  }
  
  .header-subtitle {
    display: block;
    font-size: 14px;
    color: $gray-600;
    line-height: 1.5;
  }
}

.form-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  
  .form-item {
    margin-bottom: 24px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      background: #f8f9fa;
      border-radius: 12px;
      padding: 4px;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      
      &:focus-within {
        border-color: #007aff;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
      }
      
      .input-icon {
        padding: 0 12px;
        display: flex;
        align-items: center;
      }
      
      .password-input {
        flex: 1;
        
        :deep(.uni-easyinput__content) {
          background: transparent;
          border: none;
          padding: 12px 0;
        }
        
        :deep(.uni-easyinput__content-input) {
          font-size: 16px;
        }
      }
    }
    
    .password-tips {
      margin-top: 8px;
      padding-left: 44px;
      
      .tip-text {
        font-size: 12px;
        color: $gray-500;
        line-height: 1.4;
      }
    }
  }
}

.submit-section {
  margin-bottom: 30px;
  
  .submit-btn {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    transition: all 0.3s ease;
    
    &:active {
      transform: translateY(1px);
    }
    
    &:disabled {
      background: #ccc;
      box-shadow: none;
      opacity: 0.6;
    }
  }
}

.security-tips {
  .tips-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    
    .tips-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      
      .tips-title {
        font-size: 14px;
        font-weight: 600;
        color: $gray-800;
      }
    }
    
    .tips-content {
      .tip-item {
        display: block;
        font-size: 12px;
        color: $gray-600;
        line-height: 1.6;
        margin-bottom: 4px;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
